<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-flow: column;
            text-align: center;
        }

        .head {
            margin: 20px auto;

        }

        #box {
            width: 100px;
            height: 100px;
            background-color: #000;
            margin: auto;
        }

        .d {
            display: none;
        }

        .boxs {
            width: 100px;
            height: 100px;
            background-color: #000;
            display: block;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="head">
        <button id="a">变宽</button>
        <button id="b">变高</button>
        <button id="c">变色</button>
        <button id="d">隐藏</button>
        <button id="e">重置</button>
    </div>
    <div id="box">

    </div>
</body>

<script>
    // var but1 = document.getElementById('but1')
    var a = document.getElementById('a')
    var b = document.getElementById('b')
    var c = document.getElementById('c')
    var d = document.getElementById('d')
    var e = document.getElementById('e')

    var div = document.getElementById('box')


    a.onclick = function () {//变宽
        div.style.width = "200px"
    }
    b.onclick = function () {//变高
        div.style.height = "200px"
    }
    c.onclick = function () {//变色
        div.style.backgroundColor = "red"
    }

    d.onclick = function () {//隐藏
        div.className = "d"
    }
    e.onclick = function () {//隐藏
        div.className = "boxs"
    }

</script>

</html>